<template>
    <el-dialog :model-value="iconstar" title="图标" width="42%">
        <el-scrollbar height="400px">
            <div class="icons-container">
                <div v-for="(v, i) in Object.keys(Icons)" :key="i" class="icon" @click="clickIcon(v)">
                    <component :is="`${hump(v)}`"></component>
                    <span class="icon-text"> {{ v }}</span>
                </div>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>
  
<script setup>
import { ref ,watch} from 'vue';
import * as Icons from '@element-plus/icons-vue'

import { hump,copy } from "@/ults/ults.js"
const props = defineProps({
    iconstar:{
        type:Boolean,
        default:true
    }
})
const emit = defineEmits(['onIcon'])
const clickIcon = (icon)=>{
    // console.log(icon);
    copy(icon,'已剪切')
    emit('onIcon',icon)
  
}
// watch(()=>props.iconstar,(val)=>{
//     console.log(val);
// })
</script>
<style scoped lang="less">


.icons-container {
    display: flex;
    flex-wrap: wrap;

    .icon {
        width: 25%;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 5px;
        box-sizing: border-box;
        cursor: pointer;

        .icon-text {
            flex: 1;
            font-size: 12px;
        }

        &:hover {
            color: #409efa;
        }
    }

    svg {
        width: 1.5em;
        height: 1.5em;
    }
}</style>
